<template>
<div>
     <div class="content">
        <input  v-model="keyword" type="text" placeholder="请输入城市名或拼音"/>
     </div>
     <!--只要有关键字的情况下，就让search显示  --> 
     <div class="search" v-show="keyword" ref="wrapper">
        <ul>
            <li @click="handleClick" class="seacrh-item" v-for="(item,index) of list" :key="index">{{item.name}}</li>
            <!-- 搜索不到内容，就是list.length为0的情况下 -->
            <li class="seacrh-item" v-show="!list.length">没有搜索到城市</li>
        </ul>
     </div>  
  </div>  
</template>
<script>
import BScroll from "better-scroll";
export default {
    name:"CitySearch",
    props:['cities'],
    data(){
        return {
            keyword:"",
            list:[]
        }
    },
    watch:{
        keyword(){
             if(!this.keyword){
                this.list=[];
                return;
             }
            var result=[];
            for(var i in this.cities){
                  this.cities[i].forEach(ele=> {
                       if(ele.spell.startsWith(this.keyword) || ele.name.startsWith(this.keyword)){
                           result.push(ele)
                       }
                  });
            }
            this.list=result;
        }
    },
mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {});
    });
  },
   methods:{
      handleClick(event){
          this.$store.commit("changeCity",event.target.innerText);
          this.$router.push("/");
          this.keyword=""
      }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  max-height: 1000px;
  overflow: hidden;
  position: relative;
  margin-top: 170px;
}
  .content{
      position: fixed;
      top: 89px;
      width:100%;
      height: 80px;
      z-index: 100;
      background-color: #00bcd4;
      display: flex;
      align-items: center;
      justify-content: center;
      input{
          width:92%;
          height:60px;
          border-radius:20px;
          border:none;
          outline: none;
          font-size: 18px;
      }
  }
 .search{
     position: absolute;
     top:170px;
     left:0;
     right: 0;
     bottom: 0;
     z-index: 99;
    overflow: hidden;
    background: #fff;
 }
 .seacrh-item{
     line-height: 60px;
     padding-left: 15px;
     border-bottom:1px solid #ccc;
    font-size: 18px;
    color: #666;
 }
</style>

